<template>
    <div>
        <div class="home">
            <div class="header">
                <!-- 标题 -->
                <h2>BuddyParty</h2>
                <!-- 卡片 -->
                <div class="card">
                    <div class="home-card-max">
                        <div class="home-card-max-title">maximum amount(Rs)</div>
                        <div class="home-card-max-data">₹100,000</div>
                    </div>
                    <div class="home-card-bottom">
                        <div class="home-card-bottom-left">
                            <div class="home-card-bottom-left-title">Loan period(days)</div>
                            <div class="home-card-bottom-left-data">95-365</div>
                        </div>
                        <div class="home-card-bottom-right">
                            <div class="home-card-bottom-right-title">Interest</div>
                            <div class="home-card-bottom-right-data">0.05% days</div>
                        </div>
                    </div>
                    <!-- 卡片里的logo -->
                    <div class="card-logo">
                        <img src="../assets/card-logo.png" alt="">
                    </div>
                </div>
                <!-- 按钮 -->
                <div class="apply" @click="doApply">Apply Now</div>
            </div>
            <!-- 间隙 -->
            <div class="jian"></div>
            <div class="center">
                <!-- 标题 -->
                <div class="title">Loan process</div>
                <div class="list">
                    <div class="lists">
                        <div class="img">
                            <img src="@/assets/个人信息 1.png" alt="">
                        </div>
                        <div class="mask"></div>
                        <div class="desc">Your Name</div>
                    </div>
                    <div class="lists">
                        <div class="img">
                            <img src="@/assets/手机号码 1.png" alt="">
                        </div>
                        <div class="mask"></div>
                        <div class="desc">Phone Number</div>
                    </div>
                    <div class="lists">
                        <div class="img">
                            <img src="@/assets/integral 1.png" alt="">
                        </div>
                        <div class="mask"></div>
                        <div class="desc">LoanA Mount</div>
                    </div>
                    <div class="lists">
                        <div class="img">
                            <img src="@/assets/成功 1.png" alt="">
                        </div>
                        <div class="desc">Get Loan</div>
                    </div>
                </div>

            </div>
            <div class="jian"></div>
            <!-- our advantage -->
            <div class="footer">
                <div class="biaoti">Our advantage</div>
                <ul class="orther">
                    <li class="o-list">
                        <p>CONVENIENT</p>
                        <div class="hot">
                            <img src="@/assets/Vector 19.png" alt="">
                        </div>
                        <div class="dui">
                            <img src="@/assets/Vector 16.png" alt="">
                        </div>
                    </li>
                    <li class="o-list">
                        <p>INTERESTFREE</p>
                        <div class="hot">
                            <img src="@/assets/Vector 19.png" alt="">
                        </div>
                        <div class="dui">
                            <img src="@/assets/Vector 16.png" alt="">
                        </div>
                    </li>
                    <li class="o-list">
                        <p>MULTIPLE PERIODS</p>
                        <div class="hot">
                            <img src="@/assets/Vector 19.png" alt="">
                        </div>
                        <div class="dui">
                            <img src="@/assets/Vector 16.png" alt="">
                        </div>
                    </li>
                    <li class="o-list">
                        <p>REPAY AT ANY TIME</p>
                        <div class="hot">
                            <img src="@/assets/Vector 19.png" alt="">
                        </div>
                        <div class="dui">
                            <img src="@/assets/Vector 16.png" alt="">
                        </div>
                    </li>
                </ul>

            </div>
        </div>

    </div>
</template>
<script>
import { getwwcform } from '../api/index.js'
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    data() {
        return {
        }
    },
    methods: {
        // 去贷款
        async doApply() {
            if (this.$store.state.isLogin) {
                this.$router.push('/forms')
            } else {
                this.$router.push('/login')
                this.$store.commit('logining')
            }
        },

    },
    created() {
        // this.getJob()
    },
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.home {
    .header {
        margin-left: (12/@a);
        height: (300/@a);

        h2 {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (20/@a);
            color: #000000;
        }

        .card {
            position: relative;
            width: (330/@a);
            height: (154/@a);
            background: linear-gradient(180deg, #7D42FF 0%, #BF36FE 100%);
            box-shadow: 0 (10/@a) (11/@a) (-2/@a) rgba(160, 60, 255, 0.3);
            border-radius: (20/@a);
            padding-top: (30/@a);
            padding-left: (20/@a);

            .home-card-max {
                height: (50/@a);
                margin-bottom: (35/@a);

                .home-card-max-title {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (12/@a);
                    height: (12/@a);
                    color: #FFFFFF;
                }

                .home-card-max-data {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 700;
                    font-size: (32/@a);
                    color: #FFFFFF;
                }
            }

            .home-card-bottom {
                display: flex;

                .home-card-bottom-left {
                    margin-right: (10/@a);
                }

                .home-card-bottom-left-title,
                .home-card-bottom-right-title {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (12/@a);
                    color: #FFFFFF;
                    margin-bottom: (5/@a);
                }

                .home-card-bottom-left-data,
                .home-card-bottom-right-data {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 700;
                    font-size: (16/@a);
                    color: #FFFFFF;
                }

            }

            .card-logo {
                position: absolute;
                top: (39/@a);
                right: (28/@a);
                width: (70/@a);
                height: (68/@a);

                img {
                    width: 100%;
                }
            }
        }

        .apply {
            width: (232/@a);
            height: (44/@a);
            margin-top: (26/@a);
            margin-left: (50/@a);
            background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
            border-radius: (10/@a);
            text-align: center;
            line-height: (44/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (18/@a);


            color: #FFFFFF;

        }
    }

    .jian {
        width: 100vw;
        height: (10/@a);
        background-color: rgb(245, 245, 245);
    }

    .center {
        width: 98vw;
        box-sizing: border-box;
        height: (160/@a);
        padding-top: (12/@a);

        .title {
            margin-left: (14/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (20/@a);
            color: #000000;
        }

        .list {
            display: flex;
            justify-content: space-around;
            margin-top: (20/@a);

            .lists {
                width: (85/@a);
                height: (83/@a);
                background-color: #F5F5F5;
                border-radius: (10/@a);
                position: relative;

                .img {
                    width: (30/@a);
                    height: (30/@a);
                    margin: (20/@a) (29/@a) 0 (23/@a);

                    img {
                        width: 100%;
                    }
                }

                .mask {
                    position: absolute;
                    width: (10/@a);
                    height: (10/@a);
                    right: (-5/@a);
                    top: (24/@a);
                    background: #F5F5F5;
                    transform: rotate(45deg);
                }

                .desc {
                    margin-top: (6/@a);
                    margin-left: (-3/@a);
                    text-align: center;
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (11/@a);
                    color: #000000;
                    transform: scale(0.7);
                }
            }
        }
    }

    .footer {
        padding: (15/@a);
        height: (250/@a);

        .biaoti {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (20/@a);
            margin-bottom: (20/@a);
            color: #000000;
        }

        .orther {
            float: left;

            .o-list {
                float: left;
                width: (160/@a);
                height: (75/@a);
                background: #F5F5F5;
                border-radius: (10/@a);
                margin-right: (10/@a);
                margin-bottom: (10/@a);
                position: relative;

                p {
                    margin-top: (30/@a);
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (14/@a);
                    text-align: center;

                    color: #000000;
                }

                .hot {
                    width: (34/@a);
                    height: (25/@a);
                    position: absolute;
                    bottom: 0;
                    right: 0;

                    img {
                        width: 100%;
                    }
                }

                .dui {
                    width: (21/@a);
                    height: (15/@a);
                    position: absolute;
                    right: 0;
                    bottom: 0;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }

}
</style>